<!--
 * @Author: liyin 2179253556@qq.com
 * @Date: 2023-10-25 09:30:10
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2024-07-29 14:25:48
 * @FilePath: RankList.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <!-- 学校排名 -->
    <div class="RankList" ref="rankListRef">
        <div class="list">
            <div class="items" ref="itemRef" v-for="(item, index) in rinkList.slice((page - 1) * num, page * num)"
                :key="index">
                <div :class="`sortNum sortNum${item.sort}`">
                    {{ item.sort }}
                    <i class="el-icon-caret-right"></i>
                </div>
                <div class="schoolName">{{ item.schoolName }}</div>
                <div class="progressBox">
                    <el-progress :percentage="item.percentage ? item.percentage : 0" :show-text="false"></el-progress>
                </div>
                <div>{{ (item.thisMonthCallSecond / 3600).toFixed(2) }}小时</div>
                <div>较上月{{ item.rate }}%</div>
            </div>
        </div>
        <div class="btnBox" ref="btnBoxRef">
            <div @click="prePage">上页</div>
            <div @click="nextPage">下页</div>
        </div>
    </div>
</template>
<script>

export default {
    name: 'RankList',
    props: {
        // rinkList: {
        //     type: Array,
        //     default: () => []
        // }
    },
    watch: {
        rinkList: {
            handler(newVal) {
                setTimeout(() => {
                    if (this.rinkList.length > 0) {
                        this.getNum()
                    }
                }, 0);

            }
        },
    },
    data() {
        return {
            page: 1,
            totalPage: 1,
            num: 6,
            rinkList: [{}, {}, {}, {}, {}, {}, {}, {}]
        }
    },
    mounted() {
        this.getList()
        window.addEventListener('resize', () => {
            setTimeout(async () => {
                await this.getNum()
            }, 120)
        })
    },
    methods: {
        async getList() {
            const { data: res } = await this.$http.get('/TalkScreen/Api/HlPhone/schoolCallTotalCompare')
            this.rinkList = this.sortedList(res)
            this.rinkList.forEach((item, index) => {
                item.sort = index + 1
            });
        },
        // 求数组里面的最大值
        maxValue() {
            return Math.max(...this.rinkList.map(item => item.thisMonthCallSecond));
        },
        // 按照value顺序大小从小到大排列 并算出相应的赞比
        sortedList(item) {
            return item.map((item, index) => {
                const percentage = (Number(item.thisMonthCallSecond) * 100 / Number(this.maxValue())).toFixed(2)
                const rate = this.percentage(item.thisMonthCallSecond, item.preMonthCallSecond)
                return { ...item, percentage: Number(percentage), rate: rate }; // 保留两位小数
            }).sort((a, b) => Number(b.thisMonthCallSecond) - Number(a.thisMonthCallSecond)) // 降序排序
        },
        // 这个月比较上个月同比增长/降低了多少
        percentage(currentMonthData, lastMonthData) {
            if (Number(currentMonthData) !== Number(lastMonthData)) {
                const change = Number(currentMonthData) - Number(lastMonthData);
                const absoluteChange = Math.abs(change);
                const base = Math.abs(lastMonthData);
                const percentage = (absoluteChange / base) * 100;
                return change > 0 ? '+' + percentage.toFixed(2) : '-' + percentage.toFixed(2);
            }
            return 0;
        },
        // 计算显示的条数 根据高度自适应
        getNum() {
            let ht = this.$refs.rankListRef.clientHeight - this.$refs.btnBoxRef.clientHeight - this.$util.nowSizeWidth(25)
            this.num = Math.floor(ht / this.$refs.itemRef[0].clientHeight)
            this.totalPage = Math.ceil(this.rinkList.length / this.num)
        },
        prePage() {
            if (this.page > 1) {
                this.page--
            }
        },
        nextPage() {
            if (this.page < this.totalPage) {
                this.page++
            }
        }
    },
}
</script>
<style lang="less" scoped>
.RankList {
    padding: 25px 0 25px 0;
    // 如果要求自适应可以去掉高度
    height: 292px;
    position: relative;

    // 如果要求自适应可以去掉高度
    .items {
        display: flex;
        align-items: center;
        font-weight: normal;
        color: #FFFFFF;
        font-size: 12px;
            padding-bottom: 19px;
            
                .sortNum {
                    // padding: 0px 5px;
                    color: #ffffff;
                    background: #3D8FFF;
                    border-radius: 2px;
                    text-align: center;
                    position: relative;
                    min-width: 20Px;
                    // width: 18px;
                    text-align: center;
            
                    .el-icon-caret-right {
                        position: absolute;
                        right: -7px;
                        color: #3D8FFF;
                        // font-size: 12Px;
                        top: 50%;
                        transform: translateY(-50%);
                    }
                }
            
                .sortNum.sortNum1 {
                    background: #FF3232;
            
                    .el-icon-caret-right {
                        color: #FF3232;
                    }
                }
            
                .sortNum.sortNum2 {
                    background: #FF9800;
            
                    .el-icon-caret-right {
                        color: #FF9800;
                    }
                }
            
                .sortNum.sortNum3 {
                    background: #FFD200;
            
                    .el-icon-caret-right {
                        color: #FFD200;
                    }
                }
            
                .progressBox {
                    flex: 1;
                }
            
                .schoolName {
                    width: 132px;
                    margin: 0 3px 0 15px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
            
                div:nth-of-type(4) {
                    min-width: 50px;
                    margin: 0 15px 0 20px;
                    text-align: center;
                }
            
                div:nth-of-type(5) {
                    min-width: 80px;
                    font-weight: 400;
                    color: #16F5FF;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
            }
            
            .btnBox {
                display: flex;
                align-items: center;
                justify-content: center;
                padding-top: 8px;
                // padding-bottom: 25px;
            
                // 如果要求自适应可以去掉高度
                // position: absolute;
                // bottom: 25px;
                // width: 100%;
            
                // 如果要求自适应可以去掉高度
                div {
                    padding: 3px 13px;
                    border: 1px solid #FFFFFF;
                    border-radius: 2px 2px 2px 2px;
                    font-size: 12px;
                    display: inline-block;
            margin: 0 5px;
            cursor: pointer;
            box-sizing: border-box;
        }
    }
}
</style>
